<template>
  <commonformdialog :isshowDialogs="isshowDialog" :dialogTitle="dialogTitle" @closetextDialog="closeDialog" @confirmbtn="confirmbtn"
    :dialogWidth='"40%"'>
    <div class="formarea">
      <el-form ref="coachForm" :model="coachForms" :rules="rules" size="medium" label-width="100px">

        <el-row>
          <el-col :span="24">
            <el-form-item label="角色名" prop="title">
              <el-input v-model="coachForms.title" placeholder="请输入角色名" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述" prop="description">
              <el-input type="textarea"  :rows="5" v-model="coachForms.description" placeholder="请输入角色描述" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

    </div>
  </commonformdialog>
</template>

<script>
  import commonformdialog from '@/components/commondialog/commondialog'
  //地图弹窗组件
  import mapDialog from '@/components/selectmap/selectmap'
  //引入图片上传组件
  import uploadimg from '@/components/uploadimg/uploadimg'
  //按钮权限验证
  import Treeselect from "@riophae/vue-treeselect"; //下拉树组件
  import checkPermission from "@/utils/permission";
  //api
  import {
    accountRoleCreate,
    accountRoleUpdate,
    accountRoleRead
  } from '@/api/rule'
  //获取sessionStorage
  import {
    getSessionStorage
  } from '@/utils/accessToken'
  import {
    parse
  } from 'qs'

  export default {
    data() {
      return {
        isdisableenroll: false,
        coachForms: {
          title: '',
          description: ''
        },
        rules: {
          title: [{
            required: true,
            message: '请输入角色名',
            trigger: 'change'
          }],
          description: [{
            required: true,
            message: '请输入角色描述',
            trigger: 'change'
          }],
        },
      }
    },
    components: {
      commonformdialog,
      mapDialog,
      uploadimg,
      Treeselect
    },
    props: {
      //是否显示弹窗
      isshowDialog: {
        type: Boolean,
        default: false,
        required: true,
      },
      //表单的名字
      dialogTitle: {
        type: String,
        default: '',
        required: true,
      },
      //是编辑还是新增
      formType: {
        type: Number,
        default: 0
      }
    },

    methods: {
      checkPermission,

      closeDialog() {
        //重置表单
        this.$refs['coachForm'].resetFields()
        this.$emit('closedialog')
      },
      confirmbtn() {
        this.$refs['coachForm'].validate(async valid => {
          if (!valid) return
          // TODO 提交表单
          let {
              id,
            title,
            description
          } = this.coachForms
          let params = {
            title,
            description
          }
          if (this.formType == 0) {
            let data = await accountRoleCreate(params);
            if (data.code == '0000') {
              this.$message({
                type: 'success',
                message: '添加成功!'
              });

            }
          } else {
            params.id = id
            let data = await accountRoleUpdate(params)
            if (data.code == '0000') {
              this.$message({
                type: 'success',
                message: '编辑成功!'
              });
            }
          }
          //清空数据
          this.$refs['coachForm'].resetFields()
          this.$emit('confirm')
        })
      },

    },
    mounted() {

      //点击编辑 获取回显数据
      this.$bus.on("editcoach", async (val) => {
        //获取要编辑的id
        let id = val.id
        let data = await accountRoleRead({
          id: id
        })
        this.coachForms = data.data
        this.coachForms.title = data.data.title
        this.coachForms.description = data.data.description

      });
    },
    destroyed() {
      this.$bus.off("editcoach")
    }
  }
</script>

<style scoped lang='scss'>
  .formtips {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    margin-left: 100px;
  }
</style>
